<template>
    <div>
         <!-- 搜索框 -->
  <div class="search">
      <div class="input">
        <icon type="search" size="20" /><input
          type="text"
          @input="search"
          v-model="key"
        />
      </div>
      <span @click="done">取消</span>
    </div>
        <!-- 切换 -->
    <div class="tabBox">
        <div>
          <div
            v-for="(item, index) in tabData"
            :key="index"
            :class="tabIndex == index ? 'active' : ''"
            @click="tabBtn(index)"
          >
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
       <!-- 内容渲染区 -->
       <div>
           <div>
              <navigator
                url="/pages/Detail_Vido/index"
                open-type="navigate"
                hover-class="navigator-hover"
              >
                  <dl  class="item" v-for="(item,index) in data" :key="index">
                  <dt><img :src="item.pic" alt=""></dt>
                  <dd>  {{item.title}}</dd>
                  <dd class="up">{{item.author}}</dd>
                  <dd><span class="up">{{Math.floor(item.play/10000)}}万</span><span></span></dd>
                </dl>
              </navigator>
                    
                </div>
           </div>
       </div>
   
</template>

<script>
import request from "../../util/index";
import data from "./../../static/searchdetail.json";

export default {
    data() {
        return {
            data:data.data.result.video,
            key:"",
            tabData:["默认排序","播放多","新发布"],
            tabIndex:0
        }
    },
    async onLoad(options) {
        this.key=options.keyword
        console.log(this.data[0]);
    },
    methods:{
            tabBtn(index){
      this.tabIndex = index;
	},
    }
}
</script>

<style lang="scss" scoped>
//搜索框
.search {
  height: 100rpx;
  background: #fff;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
  .input {
    background: rgb(243, 243, 243);
    width: 80%;
    height: 60rpx;
    border-radius: 20rpx;
    line-height: 100rpx;
    display: flex;
    flex-direction: row;
    icon {
      margin: 0 20rpx;
    }
    input {
      height: 60rpx;
      line-height: 60rpx;
    }
  }
}
//tab切换
 .tabBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      > div {
        flex: 1;
        text-align: center;
        > span {
          padding: 20rpx;
          margin: 0 30rpx;
          font-size: 30rpx;
        }
      }
    .active {
         span {
          padding: 20rpx;
          margin: 0 30rpx;
          font-size: 30rpx;
          border-bottom: 2px solid rgb(224, 22, 147);
        }
      }
    }
      
  }
  //渲染列表
  .item{
      width: 100%;
      height: 200rpx;
   
    
      padding-bottom: 30rpx ;
      padding-top: 10rpx;
      border-bottom: 1rpx solid #ccc;
      dt{
        float: left;
        width: 300rpx;
        height: 200rpx;
        margin-right: 30rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    dd{
      margin: 10rpx 10rpx 10rpx 0;
    }
     
  }
 .up{
   font-size: 24rpx;
   color: #ccc;
 }
</style>